<template>
  <f7-page
    ptr
    @ptr:refresh="refresh"
    infinite
    :infinite-preloader="true"
    @infinite="infinite"
  >
    <f7-navbar no-shadow sliding>
      <f7-nav-left>
        <f7-link back icon-f7="chevron_left"></f7-link>
      </f7-nav-left>
      <f7-nav-title class="nav-title">已绑定设备</f7-nav-title>
      <f7-nav-right class="nav-title-right">
        <f7-link></f7-link>
      </f7-nav-right>
    </f7-navbar>
    <f7-list-fund :parent="this" message="向左边滑动解绑设备">
      <f7-list media-list class="items">
        <!-- <f7-list-item
          swipeout
          class="item"
          v-for="item in data"
          :key="item.bindId"
          :title="item.vendor + ' ' + item.mobile"
          :after="item.createdDate | date"
          :subtitle="item.osName + ' ' + item.osVersion"
        > -->
          <f7-list-item swipeout class="item" v-for="item in query.data" :key="item.bindId" :title="item.vendor +' '+item.mobile" :after="item.createdDate | date" :subtitle="item.osName + ' ' +item.osVersion">
          <f7-swipeout-actions right>
            <f7-swipeout-button close color="red" @click="unbind"
              >解绑</f7-swipeout-button
            >
          </f7-swipeout-actions>
        </f7-list-item>
      </f7-list>
    </f7-list-fund>
    <!-- <f7-list-nofund :parent="this"></f7-list-nofund> -->
  </f7-page>
</template>
<script>
import controller from "../../libs/framework/controller";
export default class instance extends controller {
  onBeforeInit() {
    this.urls.query = "/api/setting/DeviceBind/query";
  }
  onInit() {
    this.setSearchIfNull("status", "bind");
  }
  mixin() {
    return {
      methods: {
        unbind(item) {
          this.$f7.dialog.confirm("确定解绑该设备嘛？", () => {
            this.$f7.postJSON(
              "/mobile/MobileDeviceBind/unbind",
              { bindId: item.bindId },
              function (r) {
                if (r && r.success) {
                  this.$f7.dialog.toast("解绑成功");
                  this.super.search();
                } else {
                  this.$f7.dialog.alert(r.message || "解绑失败，请稍后重试");
                }
              }
            );
          });
        },
      },
      // data() {
      //   return {
      //     data: [
      //       {
      //         bindId: "1",
      //         vendor: "XiaoMi",
      //         mobile: "12536188320",
      //         createdDate: "2022-02-11",
      //         osName: "ios",
      //         osVersion: "5.5.51",
      //       },
      //       {
      //         bindId: "2",
      //         vendor: "OPPO",
      //         mobile: "12536188320",
      //         createdDate: "2022-12-11",
      //         osName: "Android",
      //         osVersion: "5.5.52",
      //       },
      //     ],
      //   };
      // },
    };
  }
}
</script>
<style lang="less" scoped>
::v-deep.navbar {
  height: calc(88px * var(--ratio));
  .navbar-inner {
    justify-content: space-between;
    background-color: var(--color-fill-grey-inverse);
    .left {
      padding-left: calc(34px * var(--ratio));
      .link {
        padding: 0;
        width: auto;
        color: var(--color-ironblack);
      }
    }
    .title {
      color: var(--color-ironblack);
      font-size: var(--font-size-maintitle);
    }
    .right {
      padding-right: calc(38px * var(--ratio));
      margin-left: 0;
      .link {
        padding: 0;
        width: auto;
        color: var(--color-ironblack);
      }
    }
  }
}
/deep/.page-content {
  padding-top: calc(88px * var(--ratio));
}
.md .navbar a.link:before {
  content: none;
}
.item {
  width: 95%;
  margin: 0 auto;
  background-color: #f7f7f7;
  margin-bottom: 5px;
  border-radius: 10px;
}
</style>
